<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>精灵动画</title>
    <style>
        .box {
            /* 宽高有说法  140x140  背景图的宽度 除以 12 刚好有12个动作 steps(12) */
            width: 140px;
            height: 140px;
            margin: 100px auto;
            /* border: 1px solid #000;1 */
            background-image: url(../image1/bg.png);
            background-position: 0 0;
            /* 使用动画 */
            animation: running1 1s steps(12) infinite;

        }

        /* 定义动画 专门来操作背景图的一个位置 */
        @keyframes running1 {
            /* 动画的变化是背景图位置一个变化 */
            from {
                background-position: 0 0;
            }

            to {
                background-position: -1680px 0;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>